<template>
      <div class="header-search-area">
        <div class="container custom-container">
          <div class="row align-items-center">
            <div class="col-xl-2 col-lg-3 d-none d-lg-block">
              <div class="logo">
                <a href="index.html"
                  ><img src="img/logo/logo.png" alt="Logo"
                /></a>
              </div>
            </div>
            <div class="col-xl-10 col-lg-9">
              <div
                class="d-block d-sm-flex align-items-center justify-content-end"
              >
                              <!-- 搜索框 -->
                <div class="header-search-wrap">
                  <form action="#">
                    <select class="custom-select">
                      <option selected>{{$t('head.ALL_DEPARTMENT')}}</option>
                      <option>-- Grocery & Frozen</option>
                      <option>-- Fresh Fruits</option>
                      <option>-- Fresh Fish</option>
                      <option>-- Fresh Nuts</option>
                      <option>-- Fresh Meats</option>
                      <option>-- Bread & Bakery</option>
                      <option>-- Vegetable</option>
                      <option>-- Kids Food</option>
                      <option>-- Dried Fruits</option>
                      <option>-- Others Food</option>
                    </select>
                    <input type="text" :placeholder="$t('head.Search_Product')" />
                    <button><i class="flaticon-loupe-1"></i></button>
                  </form>
                </div>
                <div class="header-action">
                  <ul>
                    <li class="header-phone">
                      <div class="icon"><i class="flaticon-telephone"></i></div>
                      <a href="tel:1234566789"
                        ><span>{{$t('team.Call_Us_Now')}}</span>+185 4124 650</a
                      >
                    </li>
                    <li  class="header-user">
                      <router-link :to="ifLogin ?`/customer` :`/register`" @click.prevent="login_space" :title="ifLogin ? `进入个人主页`:`登录或注册`"><i class="flaticon-user"></i></router-link>
                    </li>
                    <li v-if="ifLogin" class="header-wishlist">
                      <a href="#" 
                        ><i class="flaticon-heart-shape-outline"></i
                      ></a>
                      <span class="item-count">0</span>
                    </li>
                    <li v-if="ifLogin" class="header-cart-action">
                      <div class="header-cart-wrap">
                        <router-link to="/cart"
                          ><i class="flaticon-shopping-basket"></i
                        ></router-link>
                        <span class="item-count">2</span>
                        <ul class="minicart">
                          <li class="d-flex align-items-start">
                            <div class="cart-img">
                              <a href="shop-details.html"
                                ><img src="img/product/cart_p01.jpg" alt=""
                              /></a>
                            </div>
                            <div class="cart-content">
                              <h4>
                                <a href="shop-details.html"
                                  >Organic Farm Fresh Nuts</a
                                >
                              </h4>
                              <div class="cart-price">
                                <span class="new">$229.9</span>
                                <span><del>$229.9</del></span>
                              </div>
                            </div>
                            <div class="del-icon">
                              <a href="#"><i class="far fa-trash-alt"></i></a>
                            </div>
                          </li>
                          <li class="d-flex align-items-start">
                            <div class="cart-img">
                              <a href="shop-details.html"
                                ><img src="img/product/cart_p02.jpg" alt=""
                              /></a>
                            </div>
                            <div class="cart-content">
                              <h4>
                                <a href="shop-details.html"
                                  >Organic Fresh Nuts Vanla Butter</a
                                >
                              </h4>
                              <div class="cart-price">
                                <span class="new">$229.9</span>
                                <span><del>$229.9</del></span>
                              </div>
                            </div>
                            <div class="del-icon">
                              <a href="#"><i class="far fa-trash-alt"></i></a>
                            </div>
                          </li>
                          <li>
                            <div class="total-price">
                              <span class="f-left">Total:</span>
                              <span class="f-right">$239.9</span>
                            </div>
                          </li>
                          <li>
                            <div class="checkout-link">
                              <a href="cart.html">Shopping Cart</a>
                              <a class="black-color" href="checkout.html"
                                >Checkout</a
                              >
                            </div>
                          </li>
                        </ul>
                      </div>
                      <div class="cart-amount">$0.00</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
     
</template>

<script>
import { isNullOrUndefind } from '@/utils/utils';
import { mapActions,mapMutations,mapState } from 'vuex';
export default {
  computed:{
        ...mapState({
          customer:state=>state.customer.customer,
          account:state=>state.customer.account,
        }),
        ifLogin(){
      
            return isNullOrUndefind(this.customer)&&isNullOrUndefind(this.account)
        }
    },
    methods:{
      login_space(){
        this.$router.push('/register')
      }
    }
}
</script>

<style>

</style>